<template>
  <view class="shop-car">
    <commonCar @delect="handleDelete" @accounts="handleCheckout">
    </commonCar>
    <view class="empty-bottom-space"></view>
  </view>
</template>

<script setup>
import commonCar from './components/shopCar'
import { onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useCartStore } from '../../store/cartStore'

const cartStore = useCartStore()

onMounted(async () => {
  await loadCartData()
})

onShow(async () => {
  await loadCartData()
})

async function loadCartData() {
  try {
    await cartStore.loadCartList()
    await cartStore.updateCartInfo()
  } catch (error) {
    uni.showToast({
      title: '加载购物车数据失败',
      icon: 'none'
    })
  }
}

async function handleDelete(selectedItems) {
  try {
    uni.showToast({
      title: '删除成功',
      icon: 'success'
    })
    await loadCartData()
  } catch (error) {
    uni.showToast({
      title: '删除商品失败',
      icon: 'none'
    })
  }
}

function handleCheckout(selectedItems) {
  try {
    uni.setStorageSync('checkoutItems', JSON.stringify(selectedItems))
    uni.navigateTo({
      url: '/components/Settlement'
    })
  } catch (error) {
    uni.showToast({
      title: '跳转结算页面失败',
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
.shop-car {
  width: 750rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8f8f8;
  
  .car-header {
    width: 100%;
    padding: 30rpx 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
    
    .header-title {
      font-size: 40rpx;
      font-weight: bold;
      color: #333333;
    }
    
    .header-actions {
      display: flex;
      align-items: center;
    }
  }
  
  .empty-bottom-space {
    height: 150rpx;
    width: 100%;
  }
}
</style>
